<template>
    <!-- 表单组件 可在使用时 添加 flex-form 类名来进行单排排序 用于头部筛选搜索 :label-width="labelWidth" -->
    <el-form ref="form-element" :rules="rules" :model="form" :size="size" :data-type="type">
        <slot :data="form"></slot>
        <el-form-item class="btn-item">
            <el-button
                v-show="showBtn.search"
                @click="clickSearchBtn"
                type="primary"
                icon="el-icon-search"
                >查询</el-button
            >
            <el v-show="showBtn.cancel" @click="clickCancelBtn"
  > 取消</el - button
    >
    <el type="primary" v-show="showBtn.law" @click="clickLawBtn"
      > <i class="icon iconfont">&#xe7a4;</i> 规律分析</el - button
        >
        <el
          type="primary"
          v-show="showBtn.call"
                @click="clickCallBtn"
  > <i class="icon iconfont">&#xe7a4;</i> 通话分析</el - button
    >
    <el
      type="primary"
      v-show="showBtn.message"
                @click="clickMessageBtn"
  > <i class="icon iconfont">&#xe7a4;</i> 短信分析</el - button
    >
    <el
      v-show="showBtn.reset"
                @click="resetForm"
type = "warning"
icon = "el-icon-refresh-right"
  > 重置</el - button
    >
    <el
      v-show="showBtn.add"
                @click="clickAddBtn"
type = "primary"
icon = "el-icon-plus"
class="old-btn"
  > 新增</el - button
    >
    <el
      v-show="showBtn.startModel"
                @click="clickStartModelBtn"
type = "primary"
icon = "el-icon-plus"
                : disabled = "disableModel"
  > 开始建模</el - button
    >
    <el
      v-show="showBtn.resetModel"
                @click="clickResetModelBtn"
type = "danger"
icon = "el-icon-refresh"
                : disabled = "showBtn.disableResetModel"
  > 重新建模</el - button
    >
    <el
      v-show="showBtn.refresh"
                @click="clickRefreshBtn"
type = "primary"
icon = "el-icon-refresh"
class="old-btn"
  > 刷新</el - button
    >
    <el
      type="primary"
      v-show="showBtn.save"
                @click="clickSaveBtn"
  > 保存</el - button
    >
    <el
      type="success"
      v-show="showBtn.import"
                @click="clickImportBtn"
class="old-btn"
  > <i class="icon iconfont">&#xe7a5;</i> 导入</el - button
    >
    <el type="warning" v-show="showBtn.out" @click="clickOutBtn"
class="old-btn"
  > <i class="icon iconfont">&#xe7aa;</i> 导出</el - button
    >
    <el type="primary" v-show="showBtn.outModel" @click="clickOutModelBtn"
      > <i class="icon iconfont">&#xe7aa;</i> 导出模板</el - button
        >
        <el
          type="danger"
          v-show="showBtn.remove"
                @click="clickRemoveBtn"
icon = "el-icon-delete"
class="old-btn"
  > 删除</el - button
    >
    <el
      type="primary"
      v-show="showBtn.sure"
                @click="clickSureBtn"
  > 确认提交</el - button
    >
    <el
      type="primary"
      v-show="showBtn.submit"
                @click="clickSubmitBtn"
icon = "el-icon-circle-check"
  > 提交</el - button
    >
    <el
      type="primary"
      v-show="showBtn.submit2"
                @click="clickSubmit2Btn"
  > 提交</el - button
    >
    <el type="success" v-show="showBtn.statistics" @click="clickStatisticsBtn"
      > <i class="icon iconfont">&#xeac5;</i> 生成报告</el - button
        >
        <el type="success" v-show="showBtn.checkStatic" @click="clickCheckBtn"
          > <i class="icon iconfont">&#xe7a4;</i> 查看报告</el - button
            >
            <el
              type="primary"
              v-show="showBtn.reply"
                @click="clickReplyBtn"
icon = ""
  > 回复</el - button
    >
    <el
      type="warning"
      v-show="showBtn.comeback"
                @click="clickComebackBtn"
  > <i class="icon iconfont">&#xe7ad;</i> 返回</el - button
    >
    <el
      class="login-btn"
      v-show="showBtn.login"
                @click="loginBtn"
  > 登录</el - button
    >
        </el - form - item >
    </el - form >
</template >

<script>
export default {
  name: "BaseForm",
  props: {
    form: {
      // 表单每一项的对象属性
      type: Object,
      default: () => {
        return {};
      }
    },
    rules: {
      // 表单校验规则
      type: Object,
      default: () => {
        return {};
      }
    },
    labelWidth: {
      // label项的宽度
      type: String,
      default: () => {
        return "90px";
      }
    },
    size: {
      // 表单大小
      type: String,
      default: () => {
        return "medium";
      }
    },
    showBtn: {
      // 操作按钮的显示
      type: Object,
      default: () => {
        return {
          search: false,
          cancel: false,
          law: false,
          call: false,
          message: false,
          reset: false,
          add: false,
          refresh: false,
          save: false,
          import: false,
          out: false,
          remove: false,
          sure: false,
          submit: false,
          submit2: false,
          comeback: false,
          login: false,
          reply: false,
          statistics: false,
          checkStatic: false,
          startModel: false,
          disableModel: false,
          disableResetModel: false
        };
      }
    },
    // 自定义的重置按钮点击事件
    theReset: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    type: {
      type: String,
      default: () => {
        return "normal";
      }
    },
    disableModel: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  created() {},
  data() {
    return {};
  },
  methods: {
    clickSearchBtn() {
      this.$emit("click-search-btn");
    },
    clickCancelBtn() {
      this.$emit("click-cancel-btn");
    },
    clickLawBtn() {
      this.$emit("click-law-btn");
    },
    clickCallBtn() {
      this.$emit("click-call-btn");
    },
    clickMessageBtn() {
      this.$emit("click-message-btn");
    },
    resetForm() {
      if (this.theReset) {
        return this.$emit("click-reset-btn");
      }
      this.$refs["form-element"].resetFields();
    },
    clickAddBtn() {
      this.$emit("click-add-btn");
    },
    clickRefreshBtn() {
      this.$emit("click-refresh-btn");
    },
    clickSaveBtn() {
      if (this.rules) {
        this.$refs["form-element"].validate(valid => {
          // 通过验证
          if (valid) {
            return this.$emit("click-save-btn", true);
          } else {
            return this.$emit("click-save-btn", false);
          }
        });
      } else {
        this.$emit("click-save-btn");
      }
    },
    clickCheckBtn() {
      this.$emit("click-check-btn");
    },
    clickImportBtn() {
      this.$emit("click-import-btn");
    },
    clickOutBtn() {
      this.$emit("click-out-btn");
    },
    clickOutModelBtn() {
      this.$emit("click-out-model");
    },
    clickRemoveBtn() {
      this.$emit("click-remove-btn");
    },
    clickSureBtn() {
      this.$emit("click-sure-btn");
    },
    clickSubmitBtn() {
      this.$emit("click-submit-btn");
    },
    clickSubmit2Btn() {
      if (this.rules) {
        this.$refs["form-element"].validate(valid => {
          // 通过验证
          if (valid) {
            return this.$emit("click-submit2-btn", true);
          } else {
            return this.$emit("click-submit2-btn", false);
          }
        });
      } else {
        this.$emit("click-submit2-btn");
      }
    },
    clickStatisticsBtn() {
      this.$emit("click-statistics-btn");
    },
    clickReplyBtn() {
      this.$emit("click-reply-btn");
    },
    clickComebackBtn() {
      this.$emit("click-comeback-btn");
    },
    loginBtn() {
      this.$refs["form-element"].validate(valid => {
        // 通过验证
        if (valid) {
          this.$emit("login-btn", this.form);
        }
      });
    },
    clickStartModelBtn() {
      this.$emit("click-start-model-btn");
    },
    clickResetModelBtn() {
      this.$emit("click-reset-model-btn");
    }
  }
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/common.less";
.btn-item {
  text-align: center;
  margin-top: 2.75rem;
  ::v-deep .el-form-item__content {
    //margin-left: 30px !important;
    .el-button--mini,
    .el-button--mini.is-round {
      padding-left: 10px;
      padding-right: 10px;
    }
    .el-button--primary {
      background-color: @theme-backgroundColor-primary;
      border-color: @theme-backgroundColor-primary;
      .icon {
        font-size: 1rem;
      }
    }
    .el-button--warning {
      background-color: @theme-backgroundColor-warning;
      border-color: @theme-backgroundColor-warning;
      .icon {
        font-size: 1rem;
      }
    }
    .el-button--success {
      background-color: @theme-backgroundColor-success;
      border-color: @theme-backgroundColor-success;
      .icon {
        font-size: 1rem;
      }
    }
  }
}

.login-btn {
  width: 13.33rem;
  height: 3.33rem;
  background: #00c1fe;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

.old-btn {
  display: none !important;
}

.el-form[data-type="search-mode"] {
  /deep/ .el-form-item {
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    margin-bottom: 2rem !important;

    &.btn-item {
      border: none;
    }

    .el-input {
      width: 13.5rem !important;
    }

    label {
      background: #f0f0f0;
      padding: 0 1em 0 1em;
      min-width: 7em;
      text-align: center;
    }

    .el-input__inner {
      border: none;
    }
  }
}
</style>
